<template>
	<!-- 人员管理 -->
	<view class="peopleManagement2">
		<view class="head"><button @click="toAddUsers()">新增用户</button></view>
		<view class="body">
			<view class="for1" v-for="(item, index) in items">
				<view class="item1" :class="{ updateHeight: !item.noShowValue }">
					<img src="@/static/男头像.png" alt="" />
					<view class="account">
						{{ item.account }}
					</view>
					<view class="name">
						{{ item.name }}
					</view>
					<view class="button">
						<button @click="openUpdate(index)">修改密码</button>
					</view>
					<view class="updatePassword" :class="{ noShow: item.noShowValue }">
						<input type="text" v-model="item.passwordInput" placeholder="请输入修改后密码" />
						<button @click="updatePassowordMy(item)">确认</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { request } from '../../request';

export default {
	data() {
		return {
			items: [],
			inputs: {
				password: null
			}
		};
	},
	methods: {
		// 到增加用户的页面
		toAddUsers() {
			uni.navigateTo({
				url: '/pages/inStorage/addUsers'
			});
		},
		// 发送修改请求
		updatePassowordMy(item) {
			const data = {
				account: item.account,
				password: item.passwordInput
			};
			request('admin/updateUser', data, 'POST').then((res) => {
				if (res.data.code != 200) {
					this.$message.error('   ' + res.data.msg);
					return;
				}
				this.$message.success('      修改成功！');
				setTimeout(() => {
					location.reload();
				}, 800);
			});
		},
		// 开启显示修改按钮开关
		openUpdate(index) {
			this.items[index].noShowValue = !this.items[index].noShowValue;
			this.$set(this.items, index, this.items[index]);
		},
		openUpdate2() {
			this.item2 = !this.item2;
		}
	},
	onLoad() {
		// 获取所有用户
		request('admin/selectAllUser', {}, 'GET').then((res) => {
			if (res.data.code != 200) {
				this.$message.error('   ' + res.data.msg);
				return;
			}
			this.items = res.data.data;
			// 赋值
			for (var i = 0; i < this.items.length; i++) {
				this.items[i]['noShowValue'] = true;
				this.items[i]['passwordInput'] = null;
			}
		});
	}
};
</script>

<style scoped>
.head {
	width: 100%;
	height: 100rpx;
	background-color: #e4e7ef;
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-right: 30rpx;
	box-sizing: border-box;
}

.head button {
	width: 200rpx;
	height: 80rpx;
	font-size: 28rpx;
	background-color: #303133;
	color: #fff;
	border-radius: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	position: static;
	transition: all 0.2s;
}

.head button:active {
	background-color: #1e1e1e;
	transform: scale(0.98);
}

.body {
	padding: 0 30rpx;
}

.item1 {
	position: relative;
	margin: 30rpx 0;
	width: 100%;
	height: 180rpx;
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	box-sizing: border-box;
	transition: 0.5s;
}

.item1 img {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.account {
	width: 180rpx;
	font-size: 28rpx;
	color: #606266;
	margin-bottom: 10rpx;
	z-index: 99;
}

.name {
	font-size: 32rpx;
	color: #303133;
	font-weight: 500;
	z-index: 99;
}

.button {
	margin-left: auto;
}

.button button {
	width: 170rpx;
	height: 80rpx;
	font-size: 24rpx;
	background-color: #409eff;
	color: #fff;
	border-radius: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.2s;
}

.button button:active {
	background-color: #3a8ee6;
	transform: scale(0.95);
}
/* .updatePassword {
	position: absolute;
	width: 340rpx;
	height: 80rpx;
	margin: 260rpx 0 0 80rpx;
}
.updatePassword input {
	height: 65rpx;
	position: absolute;
	border: 1px solid #e6e6e6;
	border-radius: 5%;
	margin: 8rpx 0 0 0;
}
.updatePassword button {
	position: absolute;
	width: 150rpx;
	font-size: 32rpx;
	height: 80rpx;
	margin: 0rpx 0 0 380rpx;
} */

/* 修改后 */
.updatePassword {
	position: absolute;
	width: 100%;
	margin: 400rpx 0 0 0;
}

.updatePassword input {
	width: 80%;
	height: 80rpx;
	font-size: 28rpx;
	border: 1rpx solid #ebeef5;
	border-radius: 12rpx;
	padding: 0 20rpx;
	box-sizing: border-box;
	margin-left: 60rpx;
	margin-bottom: 30rpx;
}

.updatePassword input::placeholder {
	color: #c0c4cc;
}

.updatePassword button {
	width: 80%;
	height: 90rpx;
	font-size: 32rpx;
	background-color: #409eff;
	color: #fff;
	border-radius: 45rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.2s;
}

.updatePassword button:active {
	background-color: #3a8ee6;
	transform: scale(0.98);
}
.noShow {
	display: none;
}
.updateHeight {
	padding-top: 100rpx;
	padding-bottom: 350rpx;
}
</style>
